<template>
  <div class="footer-page">
    <el-form ref="articleForm" :model="articleForm" :rules="rules" label-width="130px" class="demo-articleForm">
      <el-form-item label="文章标题：" prop="article_title">
        <el-input v-model="articleForm.article_title" style="width:600px" maxlength="50" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="文章关键字：" prop="keword">
        <el-input v-model="articleForm.keword" style="width:600px" maxlength="20" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="文章栏目" required>
        <el-form-item prop="parentid" style="float: left; margin-right: 10px">
          <el-select v-model="articleForm.parentid" placeholder="一级分类" @change="changeLevel1">
            <el-option v-for="item in list_Level1" :key="item.id" :label="item.type_name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="type_id" style="float: left">
          <el-select v-model="articleForm.type_id" placeholder="二级分类">
            <el-option v-for="item in list_Level2" :key="item.id" :label="item.type_name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="文章缩略图：" prop="article_img">
        <crop-upload
          :init-val="articleForm.article_img"
          :always-crop="true"
          :fixed-box="false"
          wrapper-width="200px"
          wrapper-height="150px"
          cropper-width="600px"
          cropper-height="450px"
          :auto-crop-width="200"
          :auto-crop-height="150"
          dialog-width="640px"
          tip="上传图片将进行裁剪，建议图片尺寸200*150px以上。"
          @setVal="(val) => { articleForm.article_img = val }"
        />
      </el-form-item>
      <el-form-item label="文章摘要：" prop="abstract">
        <el-input v-model="articleForm.abstract" style="width:600px" type="textarea" placeholder="请输入文章摘要" maxlength="100" show-word-limit resize="none" />
      </el-form-item>
      <el-form-item label="文章内容：" prop="content" style="height: 280px">
        <text-editor style="width:800px" :content="articleForm.content" @onEditorChange="onEditorChange" />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-radio-group v-model="articleForm.status" @change="changeRadio">
          <el-radio v-model="articleForm.status" :label="1">已发布</el-radio>
          <el-radio v-model="articleForm.status" :label="2">未发布</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="推荐：" prop="recommend">
        <el-checkbox-group v-model="articleForm.recommend" @change="changeCheckBox">
          <el-checkbox label="home">首页推荐</el-checkbox>
          <el-checkbox label="hot">热门资讯</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="展示平台：" prop="platform">
        <el-checkbox-group v-model="articleForm.platform">
          <el-checkbox label="pc">PC商城</el-checkbox>
          <el-checkbox label="h5">H5商城</el-checkbox>
          <el-checkbox label="xcx">支付宝小程序</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- <el-form-item label="定时发布时间：" prop="publish_time">
      <el-input v-model="articleForm.publish_time"></el-input>
    </el-form-item> -->
      <el-form-item label="作者：" prop="author">
        <el-input v-model="articleForm.author" maxlength="20" style="width:300px" />
      </el-form-item>
    </el-form>
    <div class="page-footer-btns">
      <el-button size="small" @click="resetForm('articleForm')">重置</el-button>
      <el-button size="small" type="primary" @click="submitForm('articleForm')">发布</el-button>
    </div>
  </div>
</template>

<script>
import { getInfoTypeList } from '@/api/web'
import { addArticle, searchArticle, searchSecondCategory } from '@/api/article'
import textEditor from '@/components/textEditor'
import cropUpload from '@/components/cropUpload'
export default {
  // props: ['type', 'editId'],
  components: { textEditor, cropUpload },
  props: {
    type: {
      type: String,
      default: ''
    },
    editId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list_Level1: [],
      list_Level2: [],
      articleForm: {
        article_title: '',
        keword: '',
        parentid: '',
        type_id: '',
        article_img: '',
        abstract: '',
        status: 1,
        content: '',
        recommend: ['home'],
        home_recommend: '1',
        hot_recommend: '2',
        author: '',
        platform: ['pc', 'h5', 'xcx']
      },
      rules: {
        article_title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        parentid: [
          { required: true, message: '请选择一级分类', trigger: 'change' }
        ],
        type_id: [
          { required: true, message: '请选择二级分类', trigger: 'change' }
        ],
        article_img: [
          { required: true, message: '请上传文章缩略图', trigger: 'change' }
        ],
        abstract: [
          { required: true, message: '请输入文章摘要', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'change' }
        ],
        recommend: [
          {
            // type: "array",
            required: true,
            message: '请选择推荐项',
            trigger: 'change'
          }
        ],
        status: [
          { required: true, message: '请选择发布状态', trigger: 'change' }
        ],
        author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
        platform: [
          { required: true, message: '请选择展示平台', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    if (this.type === 'edit') {
      this.$route.meta.title = '平台文章编辑'
      this.getEdit()
    }
    this.queryLevel1()
  },
  methods: {
    queryLevel1() {
      getInfoTypeList().then((res) => {
        this.list_Level1 = res
      })
    },
    searchSecond(id) {
      searchSecondCategory(id).then((res) => {
        this.list_Level2 = res
      })
    },
    changeLevel1(val) {
      this.list_Level2 = []
      this.articleForm.type_id = ''
      this.searchSecond(val)
    },
    getEdit() {
      searchArticle(this.editId).then((res) => {
        if (res) {
          res.recommend = []
          res.platform = []
          this.searchSecond(res.parentid)
          this.articleForm = res
          let temp_recom = ''
          if (res.home_recommend === 1 && res.hot_recommend === 1) {
            temp_recom = ['home', 'hot']
          } else if (res.home_recommend === 1) {
            temp_recom = ['home']
          } else if (res.hot_recommend === 1) {
            temp_recom = ['hot']
          } else {
            temp_recom = []
          }
          this.articleForm.recommend = temp_recom
          if (res.h5_show === 1) {
            this.articleForm.platform.push('h5')
          }
          if (res.pc_show === 1) {
            this.articleForm.platform.push('pc')
          }
          if (res.xcx_show === 1) {
            this.articleForm.platform.push('xcx')
          }
        }
      })
    },
    changeRadio(val) {
      this.articleForm.status = val
    },
    changeCheckBox(val) {
      if (val.length === 2) {
        this.articleForm.home_recommend = '1'
        this.articleForm.hot_recommend = '1'
      } else if (val.length === 1) {
        this.articleForm.home_recommend = val[0] === 'home' ? '1' : '2'
        this.articleForm.hot_recommend = val[0] === 'hot' ? '1' : '2'
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const recommend = this.articleForm
          if (recommend.length === 2) {
            this.articleForm.home_recommend = '1'
            this.articleForm.hot_recommend = '1'
          } else if (recommend.length === 1) {
            this.articleForm.home_recommend = recommend[0] === 'home' ? '1' : '2'
            this.articleForm.hot_recommend = recommend[0] === 'hot' ? '1' : '2'
          }
          this.articleForm.h5_show = this.articleForm.platform.indexOf('h5') > -1 ? 1 : 2
          this.articleForm.pc_show = this.articleForm.platform.indexOf('pc') > -1 ? 1 : 2
          this.articleForm.xcx_show = this.articleForm.platform.indexOf('xcx') > -1 ? 1 : 2
          const newForm = { ...this.articleForm }
          // console.log("newForm", newForm);
          delete newForm.platform
          delete newForm.recommend
          addArticle(newForm).then((res) => {
            this.$router.push({ name: 'articlePlatform' })
          })
        }
      })
    },
    resetForm(formName) {
      if (this.type === 'edit') {
        this.$route.meta.title = '平台文章编辑'
        this.getEdit()
      } else {
        this.$refs[formName].resetFields()
        // this.articleForm.content = "";
      }
    },
    onEditorChange(val) {
      this.articleForm.content = val
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form .el-input {
  width: 100%;
}

.uploadImg {
  width: 100px;
}
</style>
